<template>
  <div class="mod-demo-echarts">
    <el-alert type="success" :closable="false">
      <p class="el-alert__description">
        提示：请选择监测参数，可填写机器名称、服务器所属部门，以及将要查询的时间范围
      </p>
    </el-alert>

    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.department"
          placeholder="部门"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.machineName"
          placeholder="机器名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="起始日期"
            v-model="dataForm.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="1">—</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="结束日期"
            v-model="dataForm.date2"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartPieBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//import echarts from 'echarts'
export default {
  data() {
    return {
      dataForm: {
        department: "",
        machineName: "",
        monitorParam: "",
        date1: "",
        date2: "",
      },
      chartPie: null,
      dataList: [],

      option: {
        backgroundColor: "#ffffff",
        title: {
          text: "报警频次分布",
          left: "center",
          top: 20,
          textStyle: {
            color: "#2a3642",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 3, name: "高温报警" },
              { value: 3, name: "潮湿报警" },
              { value: 2, name: "烟雾报警" },
              { value: 2, name: "红外报警" },
              { value: 4, name: "水浸报警" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(0, 0, 0, 0.3)",
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(0, 0, 0, 0.3)",
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            itemStyle: {
              normal: {
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      },

    };
  },
  mounted() {
    this.initChartPie();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug

    if (this.chartPie) {
      this.chartPie.resize();
    }
  },
  methods: {
    getDataList() {
      //console.log("submit!");
      this.option.series[0].data[0].value = Math.floor(Math.random()*5);
      this.option.series[0].data[1].value = Math.floor(Math.random()*5);
      this.option.series[0].data[2].value = Math.floor(Math.random()*5);
      this.option.series[0].data[3].value = Math.floor(Math.random()*5);
      this.option.series[0].data[4].value = Math.floor(Math.random()*5);
      this.initChartPie();
    },

    // 饼状图
    initChartPie() {
      // var option = {
      //   backgroundColor: "#ffffff",
      //   title: {
      //     text: "报警频次分布",
      //     left: "center",
      //     top: 20,
      //     textStyle: {
      //       color: "#2a3642",
      //     },
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     formatter: "{a} <br/>{b} : {c} ({d}%)",
      //   },
      //   visualMap: {
      //     show: false,
      //     min: 80,
      //     max: 600,
      //     inRange: {
      //       colorLightness: [0, 1],
      //     },
      //   },
      //   series: [
      //     {
      //       name: "访问来源",
      //       type: "pie",
      //       radius: "55%",
      //       center: ["50%", "50%"],
      //       data: [
      //         { value: 335, name: "高温报警" },
      //         { value: 310, name: "潮湿报警" },
      //         { value: 274, name: "烟雾报警" },
      //         { value: 235, name: "红外报警" },
      //         { value: 400, name: "水浸报警" },
      //       ].sort(function (a, b) {
      //         return a.value - b.value;
      //       }),
      //       roseType: "radius",
      //       label: {
      //         normal: {
      //           textStyle: {
      //             color: "rgba(0, 0, 0, 0.3)",
      //           },
      //         },
      //       },
      //       labelLine: {
      //         normal: {
      //           lineStyle: {
      //             color: "rgba(0, 0, 0, 0.3)",
      //           },
      //           smooth: 0.2,
      //           length: 10,
      //           length2: 20,
      //         },
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: "#c23531",
      //           shadowBlur: 200,
      //           shadowColor: "rgba(0, 0, 0, 0.5)",
      //         },
      //       },
      //       animationType: "scale",
      //       animationEasing: "elasticOut",
      //       animationDelay: function (idx) {
      //         return Math.random() * 200;
      //       },
      //     },
      //   ],
      // };
      this.chartPie = echarts.init(document.getElementById("J_chartPieBox"));
      this.chartPie.setOption(this.option);

      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
